<template>
	<view class="page">
			<view class="job-resume-head">
				<view class="job-resume-back">
					<u-icon name="arrow-left"></u-icon>
				</view>
				<view class="job-resume-search">
					<u-search
						:show-action="false"
						borderColor="rgb(230, 230, 230)"
						searchIcon="/static/job/seach1.png"
						bgColor="#eeeeee"
						height="46"
						margin="20rpx"
						placeholder="请输入求职关键词"
					></u-search>
				</view>
				<view class="job-float-navigation" @click="showFloatNavigation()">
					<image src="../../static/job/nav5.png" mode="aspectFit" class="job-float-navigation-image"></image>
				</view>
			</view>
			<view class="job-resume-screen">
				<HM-filterDropdown :menuTop="80" :filterData="filterData" :defaultSelected="defaultSelected"
					:updateMenuName="true" @confirm="confirm" dataFormat="Object"></HM-filterDropdown>
			</view>
			<u-gap height="3" bgColor="#f5f5f5" marginTop="30rpx" marginBottom="0rpx"></u-gap>


		<view class="job-resume-body">
			<view class="job-resume-list">
				<Resume></Resume>
				<u-loadmore class="u-safe-bottom u-safe-area-inset-bottom" status="nomore" loading-text="努力加载中..." loadmore-text="上拉加载" nomore-text="没有更多信息..." />
			</view>
		</view>
		<view class="job-resume-bottom">
			<view style="height: 50rpx;"></view>
		</view>
		<!-- 浮动导航开始 -->
		<JobFloatNavigation :jobFloatNavigationIsShow="floatNavigation"></JobFloatNavigation>
		<!-- 浮动导航结束 -->
		<!-- 自定义底部导航菜单开始 -->
		<JobTabbar></JobTabbar>
		<!-- 自定义底部导航菜单结束 -->
	</view>
</template>

<script>
import JobFloatNavigation from '@/components/JobFloatNavigation/JobFloatNavigation.vue';
import Resume from '@/components/Resume/Resume.vue';
import JobTabbar from '@/components/JobTabbar/JobTabbar.vue';
import data from '../jobRecruit/data.js'; //筛选菜单数据
	export default {
		data() {
			return {
				floatNavigation:false,
				indexArr: '',
				valueArr: '',

				//商品数据
				goodsList: [{
						goods_id: 0,
						img: '/static/img/goods/p1.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 1,
						img: '/static/img/goods/p2.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 2,
						img: '/static/img/goods/p3.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 3,
						img: '/static/img/goods/p4.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 4,
						img: '/static/img/goods/p5.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 5,
						img: '/static/img/goods/p6.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 6,
						img: '/static/img/goods/p7.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 7,
						img: '/static/img/goods/p8.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 8,
						img: '/static/img/goods/p9.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 9,
						img: '/static/img/goods/p10.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					}
				],
				loadingText: "正在加载...",
				defaultSelected: [],
				filterData: []
			};
		},
		filters: {
			outData(value) {
				return JSON.stringify(value);
			}
		},
		onLoad: function() {
			//定时器模拟ajax异步请求数据
			setTimeout(() => {
				this.filterData = data; 
			}, 100);
		
			//模拟ajax请求子菜单数据。
			setTimeout(() => {
				this.filterData[2].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
			}, 1000)
			setTimeout(() => {
				//3秒后 修改defaultSelected
				//this.changeSelected();
			}, 3000);
		},
		methods: {
			showFloatNavigation() {
				this.floatNavigation = !this.floatNavigation;
			},
			//接收菜单结果
			confirm(e) {
				this.indexArr = e.index;
				this.valueArr = e.value;
			
			},
			//修改选中项-示例
			changeSelected() {
				//设置选中项
				// 一下的注释是针对测试数据说明结构的意思，具体传入什么数据，要看你自己数据。如果data.js数据有修改，注意defaultSelected也要修改
				//传入defaultSelected的结构不能错，错了就报错运行异常。 不想选中的请传入null
			
				this.defaultSelected = [];
				this.$nextTick(() => {
					this.defaultSelected = [
						[3, 0, 1], //第0个菜单选中 一级菜单的第6项，二级菜单的第0项，三级菜单的第1项
						[2, 0, 1], //第1个菜单选中 一级菜单的第2项，二级菜单的第0项，三级菜单的第1项
						[1,1], //第2个菜单选中 一级菜单的第1项 一级菜单的第1项
						[
							[0],
							[1, 2, 7],
							[1, 0]
						], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
						[
							[0],
							[1],
							[1]
						] //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
					];
				})
			},
			//轮播图指示器
			swiperChange(event) {
				//this.currentSwiper = event.detail.current;
			},
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			uni.showToast({
				title: '触发上拉加载'
			});
			let len = this.goodsList.length;
			if (len >= 80) {
				this.loadingText = "到底了";
				return false;
			} else {
				this.loadingText = "正在加载...";
			}
			let end_goods_id = this.goodsList[len - 1].goods_id;
			for (let i = 1; i <= 10; i++) {
				let goods_id = end_goods_id + i;
				let p = {
					goods_id: goods_id,
					img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款'
				};
				this.goodsList.push(p);
			}
		},
		components: {
			JobFloatNavigation,
			Resume,
			JobTabbar,
		}
	}
</script>

<style lang="scss" scoped>
@import url('jobResume.css');
</style>
